<style scoped>
    .content-container {
        padding-top: 44px;
        padding-bottom: 80px;
    }

    .category-scroller > div {
        width: 92%;
    }

    .category-scroller {
        position: fixed;
        top: 0;
        width: 100%;
        height: 44px;
        background-color: white;
        z-index: 100;
    }

    /*.content-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }*/


    .scroller-toggle-area {
        position: absolute;
        background-color: white;
        width: 8% !important;
        height: 44px;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
    }

    .scroller-toggle {
        /*position: absolute;*/
        display: block;
        width: 0;
        height: 0;
        border-top: 8px solid #868686;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        transition: transform .3s ease;
        margin: 0 auto;
    }

    .scroller-toggle-up {
        transform: rotate(90deg);
    }

    .category-scroller-flex {
        width: 100%;
        padding-top: 46px;
        background-color: #f7f7f7;
        position: fixed;
        z-index: 10;
    }

    .category-scroller-flex-item {
        width: 25%;
        float: left;
        text-align: center;
        padding: 10px 0;
    }

    .category-scroller-flex-item.selected {
        color: #07bf05;
    }

</style>

<template>
    <div>
        <div class="category-scroller">
            <scroller lock-y :scrollbar-x=false  v-ref:scroller>
                <tab :style="{width: scroller_width}">
                    <tab-item v-link="{path: '/guide/' + ($index === 0? '' : 'category/' + category.id)}"
                              :selected="selected == category.id"
                              v-for="category in wrap_categorys">{{category.name}}</tab-item>
                </tab>
            </scroller>
            <div class="scroller-toggle-area" @click="toggle_up = !toggle_up">
                <a class="scroller-toggle" :class="{'scroller-toggle-up': toggle_up}" ></a>
            </div>
        </div>

        <div class="category-scroller-flex" v-show="!toggle_up" transition="expand">
            <div :class="{'selected': selected == category.id}"
                 v-for="category in wrap_categorys"
                 class="category-scroller-flex-item"
                 v-link="{path: '/guide/' + ($index === 0? '' : 'category/' + category.id)}"
                 @click="toggle_up = !toggle_up">{{category.name}}</div>
        </div>

        <div class="content-container">
            <router-view
             keep-alive
             transition="fade"
             transition-mode="out-in">
            </router-view>
        </div>

        <footer class="content-footer">
            <tabbar ></tabbar>
        </footer>
    </div>
</template>

<script>
import Vue from 'vue'
import Tab from 'vux-components/Tab'
import TabItem from 'vux-components/Tab-item'
import Scroller from 'vux-components/Scroller'
import Flexbox from 'vux-components/Flexbox'
import FlexboxItem from 'vux-components/Flexbox-item'

import Tabbar from 'util-components/tabbar'

// import {display_header} from 'vuex/actions'
import articleService from 'services/article'

const temp_categorys = [
    {name: '海淘', id: 1}, {name: '创意生活', id: 2}, {name: '送女票', id: 3},
    {name: '科技范', id: 4}, {name: '送爸妈', id: 5}, {name: '送基友', id: 6},
    {name: '送闺密', id: 7}, {name: '送同事', id: 8}, {name: '送宝贝', id: 9},
];

export default {
    computed: {
        selected: ({$route}) => $route.params.categ_id,
        wrap_categorys: ({categorys}) => [{name: '精选'}].concat(categorys),
    },
    data () {
        return {
            categorys: [],
            scroller_width: '0',
            toggle_up: true,
        }
    },
    route: {
        data: () => {
            return articleService
                .fetchArticleCateg()
                .then(({data}) => ({ categorys: data }), () => ({ categorys: temp_categorys}));
        }
    },
    components: {
        Tab,
        TabItem,
        Scroller,
        Flexbox,
        FlexboxItem,

        Tabbar
    },
    watch: {
        categorys (categorys) {
            let width = categorys.reduce(
                (total, category) => total + category.name.length * 25, 0)

            this.scroller_width = `${width + 25 * 2}px`;
            Vue.nextTick(() => {
                this.$refs.scroller.reset();
            })
        }
    }
}
</script>
